<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>线下考试设置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script src="../js/base.js"></script>
    <script src="../js/jquery.min.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<style>
    .layui-btn {
        height: 30px !important;
        line-height: 30px !important;
    }
</style>

<body>
    <div class="layui-fluid">
        <div class="layui-row">
            <div class="layui-col-md12">
                <div class="layui-card" style="display: flex;justify-content: space-between;">
                    <div class="layui-card-body ">
                        <blockquote class="layui-elem-quote" style="border:0;font-size: 18px;color: #000;">考试设置
                        </blockquote>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <form class="layui-form" style="width: 600px;margin: 40px auto;">
                    <div class="layui-form-item" style="padding-top: 15px">
                        <input id="id" name="id" type="hidden">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>申请等级
                        </label>
                        <div class="layui-input-inline">
                            <select name="level" id="level" lay-verify="required" lay-filter="level" lay-search>
                                <option value="1">1级</option>
                                <option value="2">2级</option>
                                <option value="3">3级</option>
                                <option value="4">4级</option>
                                <option value="5">5级</option>
                                <option value="6">6级</option>
                                <option value="7">7级</option>
                                <option value="8">8级</option>
                                <option value="9">9级</option>
                                <option value="10">10级</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="examinationMoney" class="layui-form-label">
                            <span class="x-red">*</span>考试费
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="examinationMoney" name="examinationMoney" value="0" required=""
                                lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="otherMoney" class="layui-form-label">
                            <span class="x-red">*</span>其他费用
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="otherMoney" name="otherMoney" value="0" lay-verify="required"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>考试起始日期
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="startTime" name="startTime" lay-verify="required"
                                lay-verify="datetime" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>考试截止日期
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="endTime" name="endTime" lay-verify="required" lay-verify="datetime"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>场地考试考核老师列表
                        </label>
                        <div class="layui-input-inline">
                            <select name="teacher" lay-verify="required" lay-search class="teacher">
                                <option value="">请选择</option>
                            </select>
                        </div>
                        <button type="button" class="layui-btn" id="add">添加</button>
                    </div>
                    <div id="timeDiv">
                    </div>
                    <div class="layui-form-item" style="text-align: center">
                        <button type="submit" lay-filter="add" lay-submit="" class="layui-btn">确定</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>
        var optionList
        var arr = []
        $.ajax({
            type: "post",
            url: getTeacherList,
            success: function (res) {
                console.log(res.userList)
                for (var i = 0; i < res.userList.length; i++) {
                    optionList += "<option value=\"" + res.userList[i].id + "\">" + res
                        .userList[i].name +
                        "</option>"
                }
                $(".teacher").append(optionList)
            }
        })


        layui.use(['form', 'layer', 'laydate'],
            function () {
                $ = layui.jquery;
                var form = layui.form,
                    layer = layui.layer;
                var laydate = layui.laydate;
                //执行一个laydate实例
                laydate.render({
                    elem: '#startTime' //指定元素
                        ,
                    type: 'datetime',
                    format: 'yyyy-MM-dd HH:mm:ss'
                });

                $("#add").click(function () {
                    $("#timeDiv").append(
                        "<div class=\"layui-form-item\"><label class=\"layui-form-label\"></label><div class=\"layui-input-inline\"><select name=\"teacher\" lay-verify=\"required\" lay-search><option value=\"\">请选择</option>" +
                        optionList +
                        "</select></div><button type=\"button\" class=\"layui-btn layui-btn-danger\" onclick=\"delDiv(this)\">删除</button></div>"
                    );
                    form.render('select')
                })


                //执行一个laydate实例
                laydate.render({
                    elem: '#endTime' //指定元素
                        ,
                    type: 'datetime',
                    format: 'yyyy-MM-dd HH:mm:ss'
                });

                form.on('select(level)', function (data) {
                    $("#timeDiv").children().remove()
                    $(".teacher").val("0")
                    $.ajax({
                        type: "post",
                        url: findFieldExaminationSetting,
                        data: {
                            level: data.value
                        },
                        success: function (res) {
                            if (res.msg == '0') {
                                if (res.fieldExaminationSetting) {
                                    $("#id").val(res.fieldExaminationSetting.id);
                                    $("#startTime").val(res.fieldExaminationSetting.startTime);
                                    $("#endTime").val(res.fieldExaminationSetting.endTime);
                                    $("#examinationMoney").val(res.fieldExaminationSetting
                                        .examinationMoney);
                                    $("#otherMoney").val(res.fieldExaminationSetting
                                        .otherMoney)

                                    for (var i = 0; i < res.fieldExaminationSettingTeacherList
                                        .length; i++) {
                                        $("#timeDiv").append(
                                            "<div class=\"layui-form-item\"><label class=\"layui-form-label\"></label><div class=\"layui-input-inline\"><select name=\"teacher\" lay-verify=\"required\" lay-search><option value=\"\">请选择</option>" +
                                            optionList +
                                            "</select></div><button type=\"button\" class=\"layui-btn layui-btn-danger\" onclick=\"delDiv(this)\">删除</button></div>"
                                        );
                                    }
                                    for (var i = 0; i < $("select[name='teacher']").length -
                                        1; i++) {
                                        $("select[name='teacher']").eq(i).val(res
                                            .fieldExaminationSettingTeacherList[i].userId)
                                    }
                                    $(".layui-btn-danger:last").click()
                                    form.render('select')
                                } else {
                                    $("#id").val("");
                                    $("#startTime").val("");
                                    $("#endTime").val("");
                                    $("#examinationMoney").val(0);
                                    $("#otherMoney").val(0);
                                    form.render('select')
                                }
                            }
                        },
                        error: function (error) {
                            console.log(error)
                        }
                    })
                });
                $.ajax({
                    type: "post",
                    url: findFieldExaminationSetting,
                    data: {
                        level: $("#level").val()
                    },
                    success: function (res) {
                        if (res.msg == '0') {
                            if (res.fieldExaminationSetting) {
                                $("#id").val(res.fieldExaminationSetting.id);
                                $("#examinationMoney").val(res.fieldExaminationSetting
                                    .examinationMoney);
                                $("#otherMoney").val(res.fieldExaminationSetting.otherMoney);
                                $("#startTime").val(res.fieldExaminationSetting.startTime);
                                $("#endTime").val(res.fieldExaminationSetting.endTime);
                                for (var i = 0; i < res.fieldExaminationSettingTeacherList
                                    .length; i++) {
                                    $("#timeDiv").append(
                                        "<div class=\"layui-form-item\"><label class=\"layui-form-label\"></label><div class=\"layui-input-inline\"><select name=\"teacher\" lay-verify=\"required\" lay-search><option value=\"\">请选择</option>" +
                                        optionList +
                                        "</select></div><button type=\"button\" class=\"layui-btn layui-btn-danger\" onclick=\"delDiv(this)\">删除</button></div>"
                                    );
                                }
                                $(".layui-btn-danger:last").click()
                                for (var i = 0; i < $("select[name='teacher']")
                                    .length; i++) {
                                    $("select[name='teacher']").eq(i).val(res
                                        .fieldExaminationSettingTeacherList[i].userId)
                                    form.render('select')
                                }

                            } else {
                                $("#id").val("");
                                $("#startTime").val("");
                                $("#endTime").val("");
                                $("#examinationMoney").val(0);
                                $("#otherMoney").val(0);
                            }
                        }
                    },
                    error: function (error) {
                        console.log(error)
                    }
                })


                //监听提交
                form.on('submit(add)',
                    function (data) {
                        console.log(data.field); //获取到表单信息
                        var time = $("#time").val() + ",";
                        //发异步
                        if ($("#startTime").val() > $("#endTime").val()) {
                            layer.alert("起止日期不能大于截止日期", {
                                icon: 6
                            }, function (index) {
                                //关闭当前frame
                                layer.close(index);
                            });
                            return false;
                        }
                        arr = []
                        $("select[name='teacher']").each(function () {
                            arr.push(Number($(this).val()))
                        })
                        console.log(arr)
                        $.ajax({
                            type: "post",
                            url: fieldExaminationSettingSave,
                            data: {
                                level: $("#level").val(),
                                id: $("#id").val(),
                                examinationMoney: $("#examinationMoney").val(),
                                otherMoney: $("#otherMoney").val(),
                                startTime: $("#startTime").val(),
                                endTime: $("#endTime").val(),
                                userId: JSON.stringify(arr)
                            },
                            success: function (res) {
                                console.log(res)
                                if (res.msg == 0) {
                                    layer.alert("操作成功", {
                                        icon: 6
                                    }, function (index) {
                                        //关闭当前frame
                                        layer.close(index);
                                        window.location.reload();
                                    });
                                } else {
                                    layer.alert(res.msg, function (index) {
                                        if (res.msg == "session已失效，请重新登录") {
                                            parent.parent.window.location.href =
                                                getRequestPrefix() +
                                                "/footBallAdmin/login.html"
                                        } else {
                                            layer.close(index);
                                        }
                                    });
                                }
                            },
                            error: function (error) {
                                console.log(error)
                            }
                        })
                        return false;
                    });
            });

        function delDiv(item) {
            console.log($(item).parent())
            $(item).parent().remove();
        }
    </script>
</body>

</html>